﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0"/>
<title>Rain CSS > Navigations</title>
<!-- Framework CSS -->
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="all"/>
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"/> 
<!--[if lte IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]--> 
<link rel="stylesheet" href="css/rain.css" type="text/css" media="all"/>
<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]-->
<style type="text/css">
.transitionBg{ left:0; bottom: 0; height:3px; width:53px; transition:all 1s ease 0s;}
.transitionLink-2:hover .transitionBg{left:57px;transition: all 1s ease 0s;}
.bootpag li{ display: inline-block; padding:5px; }
</style>
</head>

<body class="body">
	<div class="header headerBlue">
  	<nav class="lsn posr clearfix">
    	<a href="http://www.webdevelopmentmachine.com" target='_blank' class="headerLink headerLinkBlue l pr pl ib tdn">首页home</a>
    	<a href="http://www.webdevelopmentmachine.com/blog" target='_blank' class="headerLink headerLinkBlue l pr pl ib tdn">博客blog</a>
    	<a href="http://www.webdevelopmentmachine.com/demo/game.html" target='_blank' class="headerLink headerLinkBlue l pr pl ib tdn">游戏game</a>
    </nav>
  </div>
	<div class="headerM headerGrey">
  	<div class="container posr">
    	<div class="l"><a class="tdn block ptll fsxxl" href="index.html">Rain CSS</a></div>
    </div>
  </div>
    
	<div class="container mt posr"> 
    <div class="content">
    	<div class="sidebar l posr">
        <div class="sidebox">
			<h2 class="category">Web Navigations</h2>
			<p>Navigation with different styles</p>
        </div>
      </div>
      
      <div class="main mainRight posr">
      	<h2>Navigation Bar</h2>
				<div class="header headerBlue so">
				  <nav class="lsn posr clearfix">
				    <a href="#" class="headerLink headerLinkBlue l pr pl ib tdn">link1</a>
				    <a href="#" class="headerLink headerLinkBlue l pr pl ib tdn">link2</a>
				    <a href="#" class="headerLink headerLinkBlue l pr pl ib tdn">link3</a>
				  </nav>
				</div><br />
				<div class="header headerBlack so">
				  <nav class="lsn posr clearfix">
				    <a href="#" class="headerLink headerLinkBlack l pr pl ib tdn">link1</a>
				    <a href="#" class="headerLink headerLinkBlack l pr pl ib tdn">link2</a>
				    <a href="#" class="headerLink headerLinkBlack l pr pl ib tdn">link3</a>
				  </nav>
				</div><br />
				<div class="header headerGrey so">
				  <nav class="lsn posr clearfix">
				    <a href="#" class="headerLink black l pr pl ib tdn">link1</a>
				    <a href="#" class="headerLink black l pr pl ib tdn">link2</a>
				    <a href="#" class="headerLink black l pr pl ib tdn">link3</a>
				  </nav>
				</div>
      </div> 
    </div>
		
    <div class="pt">
    	<div class="sidebar l posr">
        <div class="sidebox">
				<h2 class="category">Basic list and tabs</h2>
				<p>
					Basic tabs with two styles,and also have vertical and horizontal list.
				</p>
        </div>
      </div>
      
      <div class="main mainRight posr">
      	<h2>Tabs and List</h2>
				<div class='tabswrap-1'>
				<ul class='lsn nop norm borderBottom heightL clearfix'>
					<a class='j_tab l mbn-1 b nobb bgw mrss ib roundts tdn pl pr hoverlgrey' href='javascript:;'>Home</a>
					<a class='j_tab l mrss bgw ib roundts tdn pl pr hoverlgrey' href='javascript:;'>Profile</a>
					<a class='j_tab l bgw ib roundts tdn pl pr hoverlgrey' href='javascript:;'>Messages</a>
				</ul>

				<div class='c_tabpanel' id='tab-0' >
				<h2>this is home detail.</h2>
				</div>
				<div class='c_tabpanel hide' id='tab-1' >
				<h2>this is Profile detail.</h2>
				</div>
				<div class='c_tabpanel hide' id='tab-2' >
				<h2>this is Messages detail.</h2>
				</div>
				
				</div>
				<br>
				<ul class="lsn nop norm hm clearfix">
					<li class="l ib mrss bgWhite">
					<a class="ib bgBlue rounds tdn pl pr colorWhite trans" href="#">Home</a>
					</li>
					<li class="l ib mrss bgWhite"><a class="ib rounds tdn pl pr hoverlgrey itemColorBlack trans" href="#">Profile</a></li>
					<li class="l ib bgWhite"><a class="ib rounds tdn pl pr hoverlgrey itemColorBlack trans" href="#">Messages</a></li>
				</ul>
                            <br>
				
				<ul class="rounds border lsn nop norm">
					<li class="css3_round_topS borderBottom">
						<a class="block heightL tdn pl pr css3_round_topS" href="#">Home</a>
					</li>
					<li class="borderBottom">
						<a class="block heightL tdn pl pr hoverlgrey itemColorBlack" href="#">Profile</a>
					</li>
					<li class="css3_round_bottomS">
						<a class="block heightL tdn pl pr hoverlgrey itemColorBlack css3_round_bottomS" href="#">Messages</a>
					</li>
				</ul>
                            <br>
				<ul class="lsn nop norm">
					<li class="bgWhite marginBottomSS">
						<a class="block heightL bgBlue rounds tdn pl pr colorWhite" href="#">Home</a>
					</li>
					<li class="bgWhite marginBottomSS"><a class="block heightL rounds tdn pl pr hoverlgrey itemColorBlack" href="#">Profile</a></li>
					<li class="bgWhite"><a class="block heightL rounds tdn pl pr hoverlgrey itemColorBlack" href="#">Messages</a></li>
				</ul>
				
				<h2>Nav list</h2>				
				<ul class="rounds border bgLightGrey lsn noLeftPadding pt pb norm css3_text_shadow">
					<li><a class="block colorGrey strong heightS tdn pl pr" href="#">List header</a></li>
					<li><a class="block heightS bgBlue tdn pl pr colorWhite" href="#">Home</a></li>
					<li><a class="block heightS tdn pl pr itemLightGrey2 itemColorBlack" href="#">Library</a></li>
					<li><a class="block heightS tdn pl pr itemLightGrey2 itemColorBlack" href="#">Apps</a></li>
					<li><a class="block colorGrey strong heightS tdn pl pr" href="#">Another List header</a></li>
					<li><a class="block heightS tdn pl pr itemLightGrey2 itemColorBlack" href="#">Profile</a></li>
					<li><a class="block heightS tdn pl pr itemLightGrey2 itemColorBlack" href="#">Messages</a></li>
				</ul>
      </div>
    </div>
		
    <div class="pt">
    	<div class="sidebar l posr">
        <div class="sidebox">
				<h2 class="category">Pagination and Pager</h2>
				<p>
					The pagination component provide different style, it is flexible and can work in defferent device.
				</p>
        </div>
      </div>
      
      <div class="main mainRight posr">
				<h2>Pagination</h2>
				<div class='fullw clearfix'>	
        <nav class="pagination btn border rounds posr clearfix mbs ib tac">
            <span class="ptss pbss pl pr block l bgrey_1r tdn">40 pages</span>
            <a href="#" class="ptss pbss pl pr hoverlgrey block l bgrey_1r tdn">&lt;&lt;</a>
            <a href="#" class="ptss pbss pl pr hoverlgrey block l bgrey_1r tdn active">1</a> 
            <a href="#" class="ptss pbss pl pr hoverlgrey block l bgrey_1r tdn">2</a> 
            <a href="#" class="ptss pbss pl pr hoverlgrey block l bgrey_1r tdn">3</a> 
            <a href="#" class="ptss pbss pl pr hoverlgrey block l bgrey_1r tdn">4</a> 
            <a href="#" class="ptss pbss pl pr hoverlgrey block l bgrey_1r tdn">5</a> 
            <a href="#" class="ptss pbss pl pr hoverlgrey block l bgrey_1r tdn">&gt;&gt;</a>
            <a href="#" class="ptss pbss pl pr hoverlgrey block l tdn">Lastest</a>
        </nav></div>
        <nav class="pagination block btn border rounds posr clearfix mbs ib tac">
            <span class="pagelink block l bgrey_1r tdn">40 pages</span>
            <a href="#" class="pagelink block l bgrey_1r tdn">&larr; Previous</a>
            <a href="#" class="pagelink block l bgrey_1r tdn active">1</a> 
            <a href="#" class="pagelink block l bgrey_1r tdn">2</a> 
            <a href="#" class="pagelink block l bgrey_1r tdn">3</a> 
            <a href="#" class="pagelink block l bgrey_1r tdn">4</a> 
            <a href="#" class="pagelink block l bgrey_1r tdn">5</a> 
            <a href="#" class="pagelink block l bgrey_1r tdn">Next &rarr;</a>
            <a href="#" class="pagelink block l tdn">Lastest</a>
        </nav>
        <nav class="pagination btn border rounds posr clearfix mbs ib tac">
            <span class="pagelink block l bgrey_1r">40 pages</span>
            <a href="#" class="pagelink block l bgrey_1r tdn">&lt;&lt; Previous</a>
            <a href="#" class="pagelink block l bgrey_1r tdn active">1</a> 
            <a href="#" class="pagelink block l bgrey_1r tdn">2</a> 
            <a href="#" class="pagelink block l bgrey_1r tdn">3</a> 
            <a href="#" class="pagelink block l bgrey_1r tdn">4</a> 
            <a href="#" class="pagelink block l bgrey_1r tdn">5</a> 
            <a href="#" class="pagelink block l bgrey_1r tdn">Next &gt;&gt;</a>
            <a href="#" class="pagelink block l tdn">Lastest</a>
        </nav>
        <nav class="pagination btn border rounds posr clearfix mbs ib tac">
            <span class="pts pbs pll prl block l bgrey_1r">40 pages</span>
            <a href="#" class="pts pbs pll prl hoverlgrey block l bgrey_1r tdn">&lt;&lt;</a>
            <a href="#" class="pts pbs pll prl hoverlgrey block l bgrey_1r tdn active">1</a> 
            <a href="#" class="pts pbs pll prl hoverlgrey block l bgrey_1r tdn">2</a> 
            <a href="#" class="pts pbs pll prl hoverlgrey block l bgrey_1r tdn">3</a> 
            <a href="#" class="pts pbs pll prl hoverlgrey block l bgrey_1r tdn">4</a> 
            <a href="#" class="pts pbs pll prl hoverlgrey block l bgrey_1r tdn">5</a> 
            <a href="#" class="pts pbs pll prl hoverlgrey block l bgrey_1r tdn">&gt;&gt;</a>
            <a href="#" class="pts pbs pll prl hoverlgrey block l tdn">Lastest</a>
        </nav>
        <nav class="pagination btn border rounds posr clearfix mbs ib tac">
            <span class="pt pb plll prll block l bgrey_1r tdn">40 pages</span>
            <a href="#" class="pt pb plll prll hoverlgrey block l bgrey_1r tdn">&lt;&lt;</a>
            <a href="#" class="pt pb plll prll hoverlgrey block l bgrey_1r tdn active">1</a> 
            <a href="#" class="pt pb plll prll hoverlgrey block l bgrey_1r tdn">2</a> 
            <a href="#" class="pt pb plll prll hoverlgrey block l bgrey_1r tdn">3</a> 
            <a href="#" class="pt pb plll prll hoverlgrey block l bgrey_1r tdn">4</a> 
            <a href="#" class="pt pb plll prll hoverlgrey block l bgrey_1r tdn">5</a> 
            <a href="#" class="pt pb plll prll hoverlgrey block l bgrey_1r tdn">&gt;&gt;</a>
            <a href="#" class="pt pb plll prll hoverlgrey block l tdn">Lastest</a>
        </nav>
        <div id="pagination-here" class=" block"></div>

		<h2 class="c">Pager</h2>
        <nav class="pager posr clearfix mbs width-20">
	        <a href="#" class="pagelink ib btn l bgrey_1 tdn">&larr; Previous</a> 
	        <a href="#" class="pagelink ib btn r bgrey_1 tdn">Next &rarr;</a>
        </nav>
        <nav class="pager posr clearfix mbs width-20">
	        <a href="#" class="pagelink ib btn l round-15 bgrey_1 tdn">&larr; Previous</a> 
	        <a href="#" class="pagelink ib btn r round-15 bgrey_1 tdn">Next &rarr;</a>
        </nav>
      </div>

    <footer class="footer socialFooter c borderTop">
      <p class="ps">Maintained by the <a href="https://github.com/rainzhai" class="blue">RainZhai</a>.</p>
      <p class="ps">Code licensed under <a rel="license" class="blue" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a rel="license"  class="blue" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p> 
    </footer>   
    </div>
  </div>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.tabs.js"></script>
<script type="text/javascript" src="lib/jquery-bootpag/jquery.bootpag.js"></script>
<script type="text/javascript"> 
 $('.tabswrap-1').tabs({
   event: 'click',
   currentClass: 'on mbn-1 b nobb',
   tabSelector: '.j_tab',
   panelSelector: ".c_tabpanel",
   index: 0,
   callback: function(i) {
   }
 });
$('#pagination-here').bootpag({
    total: 7,          // total pages
    page: 1,            // default page
    maxVisible: 5,     // visible pagination
    leaps: true         // next/prev leaps through maxVisible
}).on("page", function(event, num){
    $("#content").html("Page " + num); // or some ajax content loading...
    // ... after content load -> change total to 10
    $(this).bootpag({total: 10, maxVisible: 10});
});
</script>
</body>
</html>